import React, {Component, Fragment, findDOMNode} from "react";

const initTaskList = [];

function TaskEntity(text, completed, actived) {
    this.text = text;
    this.completed = completed;
    this.actived = actived;
}

class TaskAdd extends Component {
    constructor(props) {
        super(props);
    }

    onAdd() {
        this.props.onAdd(this.refs.input.value);
    }

    render() {
        return (
            <Fragment>
            <input type="text" ref='input' placeholder="输入任务..."/>
            &nbsp;
    <button onClick={this.onAdd.bind(this)}>增加</button>
        </Fragment>
    );
    }
}

class TaskItem extends Component {
    constructor(props) {
        super(props);
        this.state = this.props.task;
    }

    onActive() {
        this.setState(preState => {
            let state = {...preState, actived: !preState.actived};
        this.props.onActive(state);
        return state;
    });
    }

    onFinish() {
        this.setState(preState => {
            let state = {...preState, completed: !preState.completed};
        this.props.onFinish(state);
        return state;
    });
    }

    onDel() {
        this.props.onDel(this.state);
    }

    render() {
        let style = {
            textDecoration: this.state.completed ? 'line-through' : 'none',
            cursor: this.state.completed ? 'default' : 'pointer',
            color: this.state.actived ? "green" : "black"
        };
        return (
            <li style={{borderBottom: "1px solid black", padding: "5px"}}>
    <button onClick={this.onDel.bind(this)}>删除</button>
        &nbsp;
    <span style={style} onClick={this.onFinish.bind(this)}>{this.state.text}</span>
        </li>
    );
    }
}

class TaskList extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        if (this.props.taskList.length <= 0) {
            return null;
        }
        return (
            <Fragment>
            {this.props.taskList.map((item) => {
                return <TaskItem key={item.text} task={item} onActive={this.props.onActive}
        onFinish={this.props.onFinish} onDel={this.props.onDel}/>
    })}
    </Fragment>
    );
    }
}

export default class TaskMgr extends Component {
    constructor(props) {
        super(props);
        this.state = {
            taskList: initTaskList
        };
    }

    onActive(task) {
        this.state.taskList.forEach((item) => {
            if (item.text === task.text) {
            item.actived = task.actived;
        }
    })
    }

    onFinish(task) {
        this.state.taskList.forEach((item) => {
            if (item.text === task.text) {
            item.completed = task.completed;
        }
    })
    }

    onDel(task) {
        this.setState(preState => {
            return {
                ...preState,
            taskList: preState.taskList.filter((item) => item.text !== task.text)
    }
    });
    }

    onAdd(text) {
        if (this.state.taskList.filter((item) => item.text === text).length > 0) {
            return;
        }
        this.setState(preState => {
            return {
                ...preState,
            taskList: [...preState.taskList, new TaskEntity(text, false, false)]
    }
    });
    }

    render() {
        return (
            <div style={{float: "right", width: "300px", border: "1px solid rebeccapurple", padding: "5px"}}>
    <div style={{fontStyle: "italic", fontWeight: "bold"}}>任务管理</div>
        <TaskAdd onAdd={this.onAdd.bind(this)}/>
        <TaskList taskList={this.state.taskList} onActive={this.onActive.bind(this)}
        onFinish={this.onFinish.bind(this)} onDel={this.onDel.bind(this)}/>
        </div>
    );
    }
}